<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <el-row>
      <el-form
        ref="formRef"
        :inline="true"
        :model="driverPage"
        class="demo-form-inline"
      >
        <el-form-item
          label="司机账号"
          style="margin-right: 50px"
        >
          <el-input
            v-model="driverPage.account"
            placeholder="请输入司机账号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="司机姓名"
          style="margin-right: 50px"
        >
          <el-input
            v-model="driverPage.name"
            placeholder="请输入司机姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="司机手机号">
          <el-input
            v-model="driverPage.mobile"
            placeholder="请输入司机手机号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="所属机构"
          style="margin-right: 50px"
        >
          <el-select
            ref="optRef"
            v-model="agentIdName"
            style="width: 328px"
            placeholder="请输入所属机构"
            clearable
          >
            <el-option
              :value="driverPage.agentId"
              style="height: auto"
            >
              <el-tree
                :data="selectData"
                :props="defaultProps"
                node-key="id"
                check-strictly
                :expand-on-click-node="false"
                :check-on-click-node="true"
                @node-click="handleNodeClick"
              ></el-tree>
            </el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            @click="search"
          >搜索</el-button>
          <el-button @click="restList">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格 -->
    <el-row style="margin-top: 20px">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="page"
          label="序号"
          type="index"
          width="80px"
        ></el-table-column>
        <el-table-column
          prop="account"
          label="司机账号"
          width="200px"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="司机姓名"
          width="200px"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="司机电话"
          width="200px"
        >
        </el-table-column>
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
          width="200px"
        >
        </el-table-column>
        <el-table-column
          prop="agency.name"
          label="所属机构"
          width="200px"
        >
        </el-table-column>
        <el-table-column
          #default="{ row }"
          prop="truck.workStatus"
          label="工作状态"
          width="200px"
        >
          <span
            v-show="row.truck.workStatus==0"
            class="drop"
          ></span><span
            v-show="row.truck.workStatus==1"
            class="drop2"
          ></span>   {{ work[row.truck.workStatus] }}
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="130px"
        >
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="$router.push(`/transit/driver-detail/${row.userId}`)"
            >查看</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              size="small"
            >配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="elpag"
        :current-page="driverPage.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="driverPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
import { agencyList } from '@/api/institutions'
import { driverList } from '@/api/transit'
// import { getDriverPage } from '@/api/driver'
export default {
  name: 'Courses',
  data() {
    return {
      treeData: [],
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      driverPage: {
        page: 1,
        pageSize: 5,
        name: '',
        account: '',
        mobile: '',
        agentId: ''
      },
      work: {
        1: '休息',
        0: '上班'
      },
      total: 5,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selectData: [],
      agentIdName: ''
    }
  },

  async created() {
    this.getDriveList()
  },
  methods: {
    handleNodeClick(data, node, nodeData) {
      // select 单选
      // this.treeDataValue = data
      this.driverPage.agentId = data.id
      this.agentIdName = data.name
      this.$refs.optRef.blur()
    },
    async getDriveList() {
      const res = await driverList(this.driverPage)
      const { data } = await agencyList()
      // console.log(JSON.parse(data))
      this.selectData = JSON.parse(data)
      this.tableData = res.data.items
      this.total = +res.data.counts
    },
    handleSizeChange(val) {
      this.driverPage.pageSize = val
      this.getDriveList()
    },
    handleCurrentChange(val) {
      this.driverPage.page = val
      this.getDriveList()
    },
    // 重置
    restList() {
      this.driverPage = {
        page: 1,
        pageSize: 5,
        name: '',
        account: '',
        mobile: '',
        agentId: ''
      }
      this.agentIdName = ''
      this.getDriveList(this.driverPage)
    },
    async search() {
      const res = await driverList(this.driverPage)
      this.tableData = res.data.items
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  .elpag {
    margin: 20px;
    text-align: center;
  }
  .el-row {
    padding: 0 50px;
    padding-top: 30px;
    background-color: #fff;

    .el-input {
      width: 328px;
    }
  }
  .drop{
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: greenyellow;
  }
  .drop2{
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: red;
  }
}

.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
/deep/ .el-select {
  width: 100%;
}

/deep/ .el-card {
  overflow: initial;
}
</style>

